<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="../../js/jquery/jquery.js"> </script>
  <script type="text/javascript" src="../../js/jquery/jquery-migrate.js"> </script>
  <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js"></script>
   <script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script> 
  <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
  <script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
  <script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script> 
  <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
  <link rel="stylesheet" type="text/css" href="../../css/skins/standard/ctp-common.css" />	
  <link rel="stylesheet" type="text/css" href="../../css/messagebox.css" />
	<style type="text/css">
		
		html{
			height:100%;width:100%;
		}
		body{
			margin:5px 10px;font-size:12px;
		}
		h1{text-align:center;font-size:24px;line-height:1.5em}
		h3{
			margin:10px 0 0;padding:0;
			font-size:14px;line-height:25px
		}
		
		.help ul li{
			margin:2px 0;list-style-type:square;line-height:1.5em
		}

		.myContent{padding:50px 0;text-align:center}

		.prop{color:#00f;font-family:fixedsys}

		.table{border-collapse:collapse;border:1px solid #999;margin:5px 0}
		.table caption{background:#99BBE8;line-height:30px;border:1px solid #999;font-weight:bold}
		.table th,.table td{border:1px solid #999;text-align:right}
		.table th{text-align:center;line-height:22px;}
		.table td.code{
			background:#99BBE8;font-family:'Courier New';
			line-height:20px;font-size:12px;text-align:left;
		}

		.fmt{margin:10px 20px;line-height:1.5em}
		.mycls{font-size:18px;padding:50px 0}
		.confirm{padding:15px 20px;font-weight:bold;font-size:14px;line-height:30px}
		.confirm input {width:100%;border:1px inset #ccc}

		.customCls{
			font-weight:bold;color:#00f;font-size:20px;padding:30px 0;text-align:center
		}
		#myInput{width:90%}

	</style>
	<script type="text/javascript">

		//var location=document.location;
	</script>
 </head>
 <body>


<table width='100%' cellpadding='3' cellspacing='0' class='table'>
	<caption>组件调用方式(JSON方式)：</caption>
	<tr align='center'>
		<th width=150>示例</th>
		<th>源码</th>
	</tr>
	<tr>
		<td><input type="button" value="信息提示" onclick="javascript:example1();" /></td>
		<td class='code'>ctpMSB.alert({message:'Hello world',title:'标题',btn:[['A','a'],['B','b'],['C','c']],closeBtn:false,handler:handler1})</td>
	</tr>
	<tr>
		<td><input type="button" value="成功信息" onclick="ctpMSB.succeed({message:'成功',title:'标题',width:400,height:260,handler:handler2})" /></td>
		<td class='code'>ctpMSB.succeed({message:'成功',title:'标题',width:400,height:260,handler:handler2})</td>
	</tr>
	<tr>
		<td><input type="button" value="失败信息" onclick="ctpMSB.error({message:'操作失败！',title:'标题',handler:handler})" /></td>
		<td class='code'>ctpMSB.error({message:'操作失败！',handler:handler})</td>
	</tr>
	<tr>
		<td><input type="button" value="询问信息" onclick="ctpMSB.confirm({title:'标题',message:'信息确认框功能测试',handler:handler})" /></td>
		<td class='code'>ctpMSB.confirm({title:'标题',message:'信息确认框功能测试',handler:handler})</td>
	</tr>
	<tr>
		<td><input type="button" value="普通弹窗" onclick="ctpMSB.win({message:'普通弹出窗口',width:300,height:200,title:'普通弹窗测试'})" /></td>
		<td class='code'>ctpMSB.win({message:'普通弹出窗口',width:300,height:200,msgCls:'myContent',title:'普通弹窗测试'})</td>
	</tr>
	<tr>
		<td><input type="button" value="iframe弹窗" onclick="ctpMSB.win({message:'http://122.136.78.16:81/',width:650,height:450,title:'CTP论坛',handler:handler,iframe:true})" /></td>
		<td class='code'>ctpMSB.win(message:'http://122.136.78.16:81/',width:650,height:450,title:'CTP论坛',handler:handler,iframe:true})</td>
	</tr>
	<tr>
		<td><input type="button" value="示例" onclick="ctpMSB.confirm({msgCls:'confirm',message:'输入：<br><input type=\'text\' id=\'myInput\' onfocus=\'this.select()\' /> </br>',title:'输入',height:150,handler:getInput,autoClose:false})" /></td>
		<td class='code'>ctpMSB.confirm({msgCls:'confirm',message:'输入：&lt;br&gt;&lt;input type='text' id='myInput' onfocus='this.select()' /&gt;',title:'输入',height:150,handler:getInput,autoClose:false})" /></td>
	</tr>	
	
	<tr>
		<td><input type="button" value="弹窗传值" onclick="ctpMSB.win({title:'弹',message:'example.html',width:650,height:450,handler:handler3,iframe:true,param:'789'})" /></td>
		<td class='code'>ctpMSB.win(title:'弹',message:'example.html',width:650,height:450,handler:handler3,iframe:true,param:'789'})</td>
	</tr>	
	
</table>
<hr>
<h3>
	传值演示数据：
</h3>
<div id = "hideValue">
	123
</div> 
</hr>
<hr>
<div style="display:">
	<h3>调用方法及参数说明</h3>
	<ol class='help'>
		<li>在页面中引入ctp.ui.messagebox.js。如：&lt;script type="text/javascript" src="../../js/ctp.ui.messagebox.js"&gt;&lt;/script&gt;</li>
		<li>在页面中引入对应的皮肤文件的CSS，如：&lt;link rel="stylesheet" type="text/css" href="../../css/messagebox.css" /&gt;</li>
		<li>自定义组件的默认配置信息（<span style='color:#f00'>此步骤可选</span>，该方法可以在任意时间调用）
			<br />页面的js中通过ctp.ui.messagebox.setDefaultCfg(cfg)方法修改组件部分或全部的默认属性。 
			<br />如：ctpMSB.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'})
			<br />组件的默认配置（对于没有设定的项将采用该配置项的默认值）：
		   <br />{
			<br />&nbsp;&nbsp;&nbsp;message: '内容',	//消息框按钮
			<br />&nbsp;&nbsp;&nbsp;width: 300,			//宽
			<br />&nbsp;&nbsp;&nbsp;height: 185,		//高
			<br />&nbsp;&nbsp;&nbsp;title: '标题',		//消息框标题
			<br />&nbsp;&nbsp;&nbsp;handler: function() {}, //回调事件
			<br />&nbsp;&nbsp;&nbsp;maskAlphaColor: '#000',	//遮罩透明色
			<br />&nbsp;&nbsp;&nbsp;maskAlpha: 0.3,		//遮罩透明度
			<br />&nbsp;&nbsp;&nbsp;divDom: false,		//divDom模式
			<br />&nbsp;&nbsp;&nbsp;iframe: false,		//iframe模式
			<br />&nbsp;&nbsp;&nbsp;icoCls: '',			//图标的样式
			<br />&nbsp;&nbsp;&nbsp;btn: null,			//按钮配置
			<br />&nbsp;&nbsp;&nbsp;autoClose: true,		//点击关闭、确定等按钮后自动关闭			
			<br />&nbsp;&nbsp;&nbsp;closeBtn:true,		//是否显示关闭按钮
			<br />&nbsp;&nbsp;&nbsp;//按钮文本，可通过自定义这些属性实现本地化
			<br />&nbsp;&nbsp;&nbsp;closeTxt: '关闭',
			<br />&nbsp;&nbsp;&nbsp;okTxt:' 确 定 ',
			<br />&nbsp;&nbsp;&nbsp;cancelTxt:' 取 消 ',	
			<br />&nbsp;&nbsp;&nbsp;msgCls:'ctp-messagebox-content'		//消息内容的样式
			<br />&nbsp;&nbsp;&nbsp;minBtn:false,			//不显示最小化按钮	
			<br />&nbsp;&nbsp;&nbsp;minTxt:'最小化',
			<br />&nbsp;&nbsp;&nbsp;maxBtn:false,			//不显示最大化按钮
			<br />&nbsp;&nbsp;&nbsp;maxTxt:'最大化'   
		   <br />}
		</li>
		<li>根据需要调用相应的消息函数：
			<ul>
				<li>ctpMSB.alert(参数) //消息提示类型</li>
				<li>ctpMSB.succeedInfo(参数) //成功信息类型</li>
				<li>ctpMSB.errorInfo(参数)  //错误信息类型</li>
				<li>ctpMSB.confirmInfo(参数) //询问消息类型</li>
				<li>ctpMSB.win(参数) //自定义窗口类型(iframe、div) </li>
			</ul>
 			<b>参数传入方式：</b>
			<ul>				
				<li>JSON的传入方式，需要指定字段名,没有顺序，根据需要设定相关属性。如ctp.ui.messagebox.alert({title:'标题',message:'内容'})</li>
			</ul>
			<b>五个方法的参数意义完全相同(所有参数均为可选，不传入则使用默认参数值),具体含义如下： </b>
			<ul>
				<li><strong>message：</strong>消息组件要显示的内容，默认为“内容”。</li>
				<li><strong>width：</strong>消息框的宽度，默认为300。</li>
				<li><strong>height：</strong>消息框的高度，默认为185。</li>
				<li><strong>title：</strong>消息组件标题，默认为“标题”</li>
				<li><strong>handler：</strong>回调函数。当确定/取消/关闭按钮被点击时会触发该函数并传入点击的按钮标识。如ok代表确定，cancel代表取消，close代表关闭</li>
				<li><strong>maskAlphaColor：</strong>遮罩的颜色，默认为黑色。 </li>
				<li><strong>maskAlpha：</strong>遮罩的透明度，默认为0.3</li>
				<li><strong>autoClose：</strong>设定用户点击窗口中按钮后自动关闭窗口，默认为true（设定为false后程序中可以通过调用close方法关闭）。</li>
				</li>
				<li><strong>iframe：</strong>是否使用iframe方法加载内容，该属性如果为true，组件则尝试将message内容作为url进行加载；默认为false。 </li>
				<li><strong>divDom：</strong>是否使用divDom方法加载内容，该属性如果为true，组件则尝试将message内容作为divDom进行加载；默认为false。 </li>				
				<li><strong>icoCls：</strong>图标类型。传入的内容为className，具体写法可以参考ctp.ui.messagebox.css中对图标的定义方式。默认为空。 </li>
				<li><strong>btn：</strong>按钮定义。传入的是数组形式。每个按钮的格式为['按钮文本','按钮标识']，<br>如[['确定','ok'],['取消','cancel'],['关闭','close']]等。
				<br />注意单个按钮应该是这样的：[['确定','ok']]</li>
				<li><strong>closeBtn：</strong>是否显示关闭按钮，默认为true（显示）。<br /></li>
				<li><strong>okTxt：</strong>确定按钮的文本描述，默认为“确定”</li>
				<li><strong>cancelTxt：</strong>取消按钮的文本描述，默认为“取消”</li>
				<li><strong>closeTxt：</strong>关闭按钮的文本描述（鼠标放在关闭按钮上时显示），默认为“关闭”</li>	
				<li><strong>minTxt：</strong>最小化按钮的文本描述，默认为“最小化”</li>
				<li><strong>maxTxt：</strong>最大化按钮的文本描述，默认为“最大化”</li>
				<li><strong>minBtn：</strong>是否显示最小化按钮，默认为false</li>
				<li><strong>maxBtn：</strong>是否显示最大化按钮，默认为false<br /><br /></li>

			</ul>
		</li>
		<li><strong>操作接口：</strong>
	<dl>
		<dt><strong>属性：</strong></dt>
	 <dd><span class='prop'>&nbsp;&nbsp;&nbsp;cfg：</span>组件的当前的默认配置</dd>

	<dt><strong>方法：</strong></dt>
	<dd><span class='prop'>setDefaultCfg(cfg)：</span>设定组件的默认属性，设定后的所有弹出均默认采用cfg中的设置。<br />
		如：ctpMSB.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'});	//设定遮罩层颜色为蓝色，透明度0.2<br /><dd>

	<dd><span class='prop'>getInnerDom()：</span>在iframe窗口模式下，获取到iframe的dom对象。<br />
		如：alert(ctpMSB.getInnerDom().contentWindow.document.body.outerHTML);	//获取iframe、div页面的html内容<br /><dd>

	<dd><span class='prop'>resizeWin(w,h)：</span>通过程序动态修改窗口的大小。参数：w：宽度，h:高度<br />
		如：ctpMSB.resizeWin(400,300);	//修改弹出框宽度为400px，高度为300px<br /><dd>
	
	<dd><span class='prop'>doHandler(sign,autoClose)：</span>模拟触发某个按钮的点击事件。参数sign:传给回调函数的标识，autoClose:是否自动关闭窗口（默认采用全局配置）<br />
		如：ctpMSB.doHandler('ok',false);	//触发确定按钮的点击事件，并且执行完回调函数后不关闭窗口<br /><dd>
	<dd><span class='prop'>getButtons()：</span>获取当前弹出窗口的所有按钮对象，返回结果是一个对象集合(数组)。<br />
		如：var btnID=ctpMSB.getButtons()[0].id;	//获取第一个按钮的id<br /><dd>
	<dd><span class='prop'>close()：</span>关闭当前弹出的窗口
		如：ctpMSB.close()<br /><dd>
	<dd><span class='prop'>max()：</span>最大化弹出窗口。<br /><dd>
	<dd><span class='prop'>min()：</span>最小化弹出窗口<br /><dd>
	<dd><span class='prop'>normal()：</span>窗口普通弹出状态<br /><dd>
	</dl>
	</li>
	</ol>
</div>
	<script type="text/javascript">


		function cancelFn(){
			ctpMSB.alert({title:'标题',message:"点击了'取消'按钮"});
		}
		function okFn(){
			ctpMSB.alert({title:'标题',message:"点击了'确定'按钮"});
		}
		function closeFn(){
			ctpMSB.alert({title:'标题',message:"点击了'关闭'按钮"});
		}
		
		function handler1(tp){
			alert(tp);		
		}
		
		function handler(tp){
			if(tp=='ok'){
				okFn();
			}
			if(tp=='cancel'){
				cancelFn();
			}
			if(tp=='close'){
				closeFn()
			}
		}
		function testHd(tp){
			ctpMSB.alert({title:'标题',message:'你点击的按钮的标志为：'+tp});
		}
		function handler2(tp){
			
			
	
			if(tp=='ok'){
				ctpMSB.confirm({message:"是否继续？",title:'标题',handler:function(tp){tp=='ok'?dodo("do"):undo()}})
			}
			if(tp=='cancel'){
				cancelFn();
			}
			if(tp=='close'){
				closeFn()
			}
		}
		function dodo(xx){
			ctpMSB.alert({title:'标题',message:xx})
		}
		function undo(){
			ctpMSB.alert({title:'标题',message:"exit"})
		}

		function stateHd(tp){
			ctpMSB[tp]();
		}
		
		function example1(){

			
			ctpMSB.alert({message:'Hello world',title:'标题',btn:[['A','a'],['B','b'],['C','c']],closeBtn:false,handler:handler1})
			
		}
				function getInput(tp){
			if(tp!='ok') return ctpMSB.close();
			var v=$('#myInput').val();
			if(v=='')
				alert('请输入！')
			else{
				alert('你输入的值为：'+v)
  			ctpMSB.close();
			}
		}
		
		
		function handler3 (tp){
			
		if(tp.flag == 'do')	alert('接收来自弹出框的数据:'+tp.data);
			
			$('#hideValue').html(tp.data);
			
		}
		
		
		
	</script>
 </body>
</html>
